<template>
	<view class="inquiryPayment-wrap">
		<view class="inquiryPayment-price-mod">
			<u-title value="付款详情"></u-title>
			<view class="inquiryPayment-price-num">
				<view class="word3">{{ orderTypeList[questionOrderForm.type].name }}-{{ inquiryTypeList[questionOrderForm.inquiryType].name }}</view>
				<view class="txt1">¥&nbsp;{{ questionOrderForm.price }}</view>
			</view>
		</view>

		<view class="inquiryPayment-order" v-if="questionOrderForm.type == 0">
			<u-title value="医生信息"></u-title>
			<!-- <text lines="1" class="txt3">{{orderTypeList[questionOrderForm.type].name}}-{{inquiryTypeList[questionOrderForm.inquiryType].name}}</text> -->
			<u-doctor-item :data="doctorDetail" :type="1"></u-doctor-item>
		</view>

		<view class="inquiryPayment-patient">
			<u-title value="问诊信息"></u-title>
			<view class="inquiryPayment-patient-box">
				<view class="inquiryPayment-patient-outer">
					<text lines="1" class="word9">患者信息：</text>
					<text lines="1" class="word10">{{ patientDetail.patientName }}&nbsp;&nbsp;{{ rangeSex[patientDetail.sex].text }}&nbsp;&nbsp;{{ patientDetail.phone }}</text>
				</view>
				<view class="inquiryPayment-patient-outer">
					<text lines="1" class="word9">患病时间：</text>
					<text lines="1" class="word10">{{ durationList[questionOrderForm.duration].name }}</text>
				</view>
				<view class="inquiryPayment-patient-outer">
					<text lines="1" class="word9">就诊情况：</text>
					<text lines="1" class="word10">{{ isLookHospList[questionOrderForm.isLookHosp].name }}</text>
				</view>
				<view class="inquiryPayment-patient-outer">
					<text lines="1" class="word9">病情描述：</text>
					<text lines="1" class="word10">{{ questionOrderForm.content }}</text>
				</view>
			</view>
		</view>

		<view class="inquiryPayment-report" v-if="questionOrderForm.reportList.length > 0">
			<u-title :value="questionOrderForm.type == 2?'处方凭证':'检查报告或患处证明'"></u-title>
			<view class="inquiryPayment-report-list">
				<image :src="item" class="inquiryPayment-report-item" v-for="(item, index) in questionOrderForm.reportList" :key="index"></image>
			</view>
		</view>
		
		<view class="inquiryPayment-report" v-if="questionOrderForm.reexaminationList && questionOrderForm.reexaminationList.length > 0">
			<u-title value="复诊文件（PDF格式文件）"></u-title>
			<view class="inquiryPayment-report-list">{{questionOrderForm.reexaminationList[0].name}}</view>
		</view>
		
		<view class="store-form-line" @click="showCoupons(store)">
			<image style="width: 32rpx;height: 26rpx;margin-right: 8rpx;" src="https://res.jiuzhang-cloud.com/jzy-oss/upload/image/dti-hospital/ic_coupon.png"></image>
			<view class="store-form-title">优惠券</view>
			<view v-if="!selectCoupon" style="flex: 1;"></view>
			<view class="form_no_content">{{couponsForChoose.length == 0 ? '暂无可用': (selectCoupon ? selectCoupon.name: "请选择优惠券")}}</view>
			<view v-if="selectCoupon" class="coupon-price">-￥{{selectCoupon.money}}</view>
			<image style="width: 46rpx;height: 46rpx;" src="https://res.jiuzhang-cloud.com/jzy-oss/upload/image/dti-hospital/ic_gray_right.png"></image>
		</view>
		
		<view v-if="couponsVisible" class="coupon-page-wrap">
			<view class="outer-area" @click="showCoupons"></view>
			<view class="coupons-panel">
				<view class="coupon-panel-title">可用优惠券</view>
				<scroll-view scroll-y="true" :style="{height: `${couponPanelHeight}rpx`}">
					<view v-for="(coupon, index) in couponsForChoose" class="coupon-wrap">
						<view class="coupon-value-wrap">
							<view class="coupon-value-text">￥{{coupon.money}}</view>
							<view class="coupon-threshold-text">满{{coupon.reachMoney}}可用</view>
						</view>
						<view class="coupon-info-wrap">
							<view class="coupon-name">{{coupon.name}}</view>
							<view class="coupon-type">{{coupon.useTypeName}}</view>
							<view class="coupon-type">{{coupon.expireTime}}</view>
						</view>
						<view class="coupon-choose-btn" @click="chooseCoupon(coupon)">立即使用</view>
					</view>
				</scroll-view>
				<image src="https://res.jiuzhang-cloud.com/jzy-oss/upload/image/dti-hospital/ic_float_close.png" @click="showCoupons"></image>
			</view>
		</view>

		<u-bottom-button :value="countTotal()" content="合计" :num="countTotal()" unit="元" @click="createOrder"></u-bottom-button>
	</view>
</template>

<script>
import uTitle from '@/components/u-title/u-title.vue';
import uBottomButton from '@/components/u-bottom-button/u-bottom-button.vue';
import uDoctorItem from '@/components/u-doctor-item/u-doctor-item.vue';
import { mapState, mapMutations } from 'vuex';
export default {
	components: {
		uBottomButton,
		uTitle,
		uDoctorItem,
	},
	data() {
		return {
			inquiryOrderId: null, //问诊订单id
			doctorDetail: {}, //医生详情
			patientDetail: {}, //患者详情
			payFlag: true ,//支付按钮开关
			couponsVisible: false,
			couponPanelHeight: 0,
			couponsForChoose: [],
			selectCoupon: null,
		};
	},
	computed: {
		...mapState({
			questionOrderForm: state => state.questionOrderForm
		})
	},
	onLoad(option) {

	},
	onShow() {
		if (this.questionOrderForm.doctorId) {
			this.queryDoctorDetail();
		}
		if (this.questionOrderForm.patientId) {
			this.queryPatientDetail();
		}
		this.getAvailableCoupons();

	},
	methods: {
		...mapMutations({
			setQuestionOrderForm: 'setQuestionOrderForm',
			clearQuestionOrderForm: 'clearQuestionOrderForm'
		}),
		//医生详情
		queryDoctorDetail() {
			this.$api
				.queryDoctorDetail({
					params: {
						id: this.questionOrderForm.doctorId
					}
				})
				.then(res => {
					if (res.code == 200) {
						this.doctorDetail = res.result;
					} else {
						uni.showToast({
							title: res.message,
							icon: 'none'
						});
					}
				});
		},

		//患者详情
		queryPatientDetail() {
			this.$api
				.patientDetail({
					params: {
						id: this.questionOrderForm.patientId
					}
				})
				.then(res => {
					if (res.code == 200) {
						this.patientDetail = res.result;
					} else {
						uni.showToast({
							title: res.message,
							icon: 'none'
						});
					}
				});
		},
		
		countTotal() {
			let price = 0.00;
			price = this.questionOrderForm.price - (this.selectCoupon ? this.selectCoupon.money: 0);
			return price > 0 ? ('立即支付' + price.toFixed(2) + '元'): '立即提交';
		},

		//创建订单
		createOrder() {
			if (this.payFlag) {
				this.payFlag = false;
				if (this.questionOrderForm.type == 0) {
					this.createDoctorOrder();
				} else {
					this.createGoodsOrder();
				}
			}
		},

		//创建商品订单
		createGoodsOrder() {
			this.$api
				.createGoodsOrder({
					data: {
						commodityBuyList: [
							{
								buyNum: 1,
								commodityId: this.questionOrderForm.inquiryType + 1
							}
						],
						orderType: this.questionOrderForm.type,
						inquiryType: this.questionOrderForm.inquiryType,
						couponUseId: this.selectCoupon ? this.selectCoupon.id: null
					}
				})
				.then(res => {
					if (res.code == 200) {
						this.questionOrderForm.orderId = res.result.id;
						this.addQuestionOrder();
					} else {
						uni.showToast({
							title: res.message,
							icon: 'none'
						});
					}
				});
		},

		//创建医生订单
		createDoctorOrder() {
			this.$api
				.createDoctorOrder({
					data: {
						doctorId: this.questionOrderForm.doctorId,
						inquiryType: this.questionOrderForm.inquiryType,
						couponUseId: this.selectCoupon ? this.selectCoupon.id: null
					}
				})
				.then(res => {
					if (res.code == 200) {
						this.questionOrderForm.orderId = res.result.id;
						this.addQuestionOrder();
					} else {
						uni.showToast({
							title: res.message,
							icon: 'none'
						});
					}
				});
		},

		//添加问诊病情描述
		addQuestionOrder() {
			let params = JSON.parse(JSON.stringify(this.questionOrderForm))
			let arr = []
			params.reexaminationList && params.reexaminationList.forEach((item)=>{
				arr.push(item.url)
			})
			params.reexaminationList = arr
			this.$api
				.addQuestionOrder({
					data: params
				})
				.then(res => {
					if (res.code == 200) {
						this.inquiryOrderId = res.result;
						this.submitOrder();
					} else {
						uni.showToast({
							title: res.message,
							icon: 'none'
						});
					}
				});
		},

		//发起微信支付
		submitOrder() {
			this.$api
				.submitOrder({
					params: {
						commodityName: this.orderTypeList[this.questionOrderForm.type].name + '-' + this.inquiryTypeList[this.questionOrderForm.inquiryType].name,
						orderId: this.questionOrderForm.orderId
					}
				})
				.then(res => {
					if (res.code == 200) {
						if (res.result == null) {
							// code == 200 且 result为空的情况代表只支付0元，直接跳过支付流程
							uni.showToast({
								title: res.message,
								icon: '支付成功'
							});
							uni.reLaunch({
								url: '/pages-order/inquiryOrderInfo/inquiryOrderInfo?id=' + this.inquiryOrderId
							});
						} else {
							this.wxRequestPayment(res.result);
						}
					} else {
						uni.showToast({
							title: res.message,
							icon: 'none'
						});
					}
				});
		},

		//微信小程序拉起支付
		wxRequestPayment(res) {
			wx.requestPayment({
				timeStamp: res.timeStamp,
				nonceStr: res.nonceStr,
				package: res.packageValue,
				signType: res.signType,
				paySign: res.paySign,
				success: success => {
					uni.showToast({
						title: '支付成功',
						icon: 'none'
					});
				},
				fail: error => {
					uni.showToast({
						title: '取消支付',
						icon: 'none'
					});
				},
				complete: () => {
					this.payFlag = true;
					this.clearQuestionOrderForm();
					
					uni.reLaunch({
						url: '/pages-order/inquiryOrderInfo/inquiryOrderInfo?id=' + this.inquiryOrderId
					});
				}
			});
		},
		getAvailableCoupons() {
			this.$api.getMyInquiryCoupons({}).then(res => {
				if (res.code == 200){
					this.couponsForChoose = res.result;
				} else {
					uni.showToast({
						icon:'none',
						title: res.message
					})
				}
			})
		},
		showCoupons() {
			if (this.couponsForChoose.length > 0) {
				if (!this.couponsVisible) {
					this.couponPanelHeight = this.couponsForChoose.length * 235 > 800 ? 800 : this.couponsForChoose.length * 235;
				}
				this.couponsVisible = !this.couponsVisible;
			}
		},
		chooseCoupon(coupon) {
			this.selectCoupon = coupon;
			// this.handleStore.couponGrantId = coupon.id;
			this.couponsVisible = false;
			this.$forceUpdate();
		},
	}
};
</script>

<style lang="less">
@import './inquiryPayment.less';
</style>
